<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<title>申请开店</title>
<link rel="stylesheet" href="<%=basePath%>/assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/idangerous.swiper.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>assets/css/globle.css" />
<script src="<%=basePath%>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>/assets/js/fontSize.js"></script>
<script src="<%=basePath%>assets/js/webuploader.min.js"></script>
<script src="<%=basePath%>assets/js/diyUpload.js"></script>
<script src="<%=basePath%>/assets/js/newToast/newToast.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/js/newToast/newToast.css">
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<script src="<%=path%>/assets2/js/jquery.form.js"></script>

<style>
html {
	background: #fff;
}

.content>ul>li {
	border-bottom: 1px solid #f1f1f1;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.26rem;
	padding: 0 0.2rem;
}

.tijiaoanniu button {
	width: 100%;
	margin: 0 0%;
	background: red;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.3rem;
	text-align: center;
	border: none;
	color: #fff;
	position: fixed;
	bottom: 0
}

.webuploader-element-invisible {
	opacity: 0;
	width: 1rem;
    height: 1rem;
    margin: 0.1rem 0;
    position: absolute;
    top: 0;
    left: 0.2rem;
}

.selectClass {
	border: none;
	width: 50%;
	margin-left: 16%;
	height: 40px;
	-webkit-appearance: none;
	background-color: #ffffff;
	outline: none;
}

.inputClass {
	border: 0px;
	outline: none;
	cursor: pointer;
	margin-left: 16%;
}
#shopInfo{
	width: 100%;
	height: 1.2rem;
	border: none;
	line-height: 0.4rem;
}
.fenlei{
	width: 100%;
    height: 0.8rem;
    border: none;
    color: #777;
    margin-left: -4px;
    background-color: #fff;
}
.shopName,.phone{
	width: 100%;
	height: 0.6rem;
}
</style>
</head>
<body>
	<div class="header">
		<a class="returnInfo" href="#" onclick="javascript:window.location.href='<%=basePath%>app/toPersonCenter'"><i class="fa fa-angle-left"></i></a>
		申请开店
	</div>
	<input type="hidden" id="userId" name="userId" value="${users.userId}">
	<input type="hidden" value="<%=basePath%>" id="basePath">
	<div class="content" style="margin-top: 0.8rem;">
		<ul>
			<li class="clearFirx">
				<input type="text" class="shopName" placeholder="请输入店铺名" autofocus>
			</li>
			<li style="height: 1.4rem;padding-top: 0.2rem;">
				<textarea id="shopInfo" placeholder="为你的店铺添加一个吸引人的描述吧！" class="neirongtianxie"></textarea>
			</li>
			<li>
				<input type="text" class="phone" placeholder="请输入手机号码 ">
			</li>
			<li>
				<select class="fenlei">
				</select>
			</li>
			<li style="height: 2.6rem;color: #777">
				手持身份证照片
				<div>
					<ul class="upload-ul clearfix">
						<li class="upload-pick">
							<div class="webuploader-container clearfix" id="identityCardUpload"></div>
							<input id="identityCardPath" type="hidden" value="">
						</li>
					</ul>
				</div>
			</li>
			<li style="height: 2.6rem;color: #777">
				手持学生证照片
				<div>
					<ul class="upload-ul clearfix">
						<li class="upload-pick">
							<div class="webuploader-container clearfix" id="studentCardUpload"></div>
							<input id="studentCardPath" type="hidden" value="">
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
	<div class="tijiaoanniu">
		<button id="apply" style="background-color: #FF3F25;">立即申请</button>
	</div>
</body>
<script>
	$(function() {
		//上传身份证照片
		var $identityCardPath = $('#identityCardUpload').diyUpload({
			url : '<%=basePath%>app/uploadUsedImg',
			success : function(data) {
				var identityCardPath = $("#identityCardPath").val();
				if (identityCardPath == "") {
					$("#identityCardPath").val(data.photoStr);
				} else {
					$("#identityCardPath").val(identityCardPath + ',' + data.photoStr);
				}
			},
			error : function(err) {
			},
			buttonText : '',
			accept : {
				title : "Images",
				extensions : 'gif,jpg,jpeg,bmp,png'
			},
			thumb : {
				width : 120,
				height : 90,
				quality : 100,
				allowMagnify : true,
				crop : true,
				type : "image/jpeg"
			},
			auto : true
		});
		
		//上传学生证照片
		var $identityCardPath = $('#studentCardUpload').diyUpload({
			url : '<%=basePath%>app/uploadUsedImg',
			success : function(data) {
				var studentCardPath = $("#studentCardPath").val();
				if (studentCardPath == "") {
					$("#studentCardPath").val(data.photoStr);
				} else {
					$("#studentCardPath").val(studentCardPath + ',' + data.photoStr);
				}
			},
			error : function(err) {
			},
			buttonText : '',
			accept : {
				title : "Images",
				extensions : 'gif,jpg,jpeg,bmp,png'
			},
			thumb : {
				width : 120,
				height : 90,
				quality : 100,
				allowMagnify : true,
				crop : true,
				type : "image/jpeg"
			},
			auto : true
		});

		//获取分类
		$.ajax({
			url : "<%=basePath%>app/getShopClassifyList",
			timeout : 300000,
			dataType : "json",
			type : "post",
			data : {},
			success : function(data) {
				var html = "";
				$.each(data, function(i, item) {
					html += '<option value ="'+item.classifyId+'">'
							+ item.classifyName + '</option>' +

							'</opting>';
				})
				$(".fenlei").html(html);
			}
		})
		
		//立即申请
		$("#apply").click(function() {
			if ($(".shopName").val() == "" || $(".shopName").val() == null) {
				layer.open({
				    content: '请输入店铺名'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			} else if ($("#shopInfo").val() == "" || $("#shopInfo").val() == null) {
				layer.open({
				    content: '请输入店铺描述'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			} else if ($(".phone").val() == "" || $(".phone").val() == null) {
				layer.open({
				    content: '请输入手机号'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			} else if($(".phone").val().match(/^1[3|4|5|6|7|8][0-9]\d{4,8}$/)==null || $(".phone").val().length!=11 ){
	    		layer.open({
				    content: '请输11位数字的手机号'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
			 	return false;
			} else if ($(".fenlei").val() == "" || $(".fenlei").val() == null) {
				layer.open({
				    content: '请选择分类'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			}else if ($(".fenlei").val() == "" || $(".fenlei").val() == null) {
				layer.open({
				    content: '请选择分类'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			}else if ($("#identityCardPath").val() == "" || $("#identityCardPath").val() == null) {
				layer.open({
				    content: '请上传手持身份证照片'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			}else if ($("#studentCardPath").val() == "" || $("#studentCardPath").val() == null) {
				layer.open({
				    content: '请上传手持学生证照片'
			    	,skin: 'msg'
				    ,time: 2 //2秒后自动关闭
			  	});
				return false;
			} else {
				$.ajax({
					url : "<%=basePath%>app/studentApplyShop",
					timeout : 300000,
					dataType : "json",
					type : "post",
					data : {
						"merchantName" : $(".shopName").val(),
						"merchartIntro" : $("#shopInfo").val(),
						"merchantPhone" : $(".phone").val(),
						"merchartClassifyId" : $(".fenlei").val(),
						"handIdcardImg" : $("#identityCardPath").val(),
						"studentIdImg" : $("#studentCardPath").val()
					},
					success : function(data) {
						if(data.state == 2){
							layer.open({
							    content: '申请失败，店铺名已存在'
						    	,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
						  	});
						}else{
							layer.open({
							    content: '申请成功，请等待审核'
						    	,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
						  	});
							window.history.go(-1);
						}
					},
					error : function(data) {
						alert("网络错误");
					}
				})
			}
		});

	});
</script>
</html>